<template>
  <div class="books-container">
      <table class="books-table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>书籍名称</th>
                    <th>价格</th>
                    <th>数量</th>
                    <th>作者</th>
                    <th>出版社</th>
                    <th>图片</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="book in paginatedBooks" :key="book.id">
                    <td>{{book.id}}</td>
                    <td>{{book.name}}</td>
                    <td>{{book.price}}</td>
                    <td>{{book.count}}</td>
                    <td>{{book.author}}</td>
                    <td>{{book.publish}}</td>
                    <td><img :src="book.image" alt="book image" class="book-avatar"></td>
                    <td><button class="action-btn">下架</button></td>
                </tr>
            </tbody>
        </table>
        <div class="pagination">
          <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
          <span>{{currentPage}}/{{totalPages}}</span>
          <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
        </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data(){
    return{
      books:[],
      currentPage: 1,
      pageSize: 5
    }
  },
  created(){
    axios.get("http://localhost:3000/books").then((res)=>{
      console.log(res.data);
      this.books = res.data;
    }).catch(error => {
      console.error("获取书籍信息失败:", error);
    });
  },
  computed: {
    // 计算属性，返回当前页的书籍列表
    paginatedBooks() {
      // 计算当前页的起止索引
      const start = (this.currentPage - 1) * this.pageSize;
      // 计算当前页的结束索引
      const end = start + this.pageSize;
      // 返回当前页的书籍列表
      return this.books.slice(start, end);
    },
    // 计算属性，返回总页数
    totalPages() {
      //   计算总页数
      return Math.ceil(this.books.length / this.pageSize);
    }
  },
  methods: {
    // 切换到上一页
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    },
    // 切换到下一页
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
      }
    }
  }
}
</script>

<style scoped>
.books-container {
  margin: 20px;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.books-table {
  width: 100%;
  border-collapse: collapse;
}

.books-table th, .books-table td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.books-table th {
  background-color: #42b983;
  color: white;
}

.book-avatar {
  width: 50px;
  height: auto;
  border-radius: 4px;
}

.action-btn {
  background-color: #42b983;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
}

.action-btn:hover {
  background-color: #38a169;
}

.pagination {
  margin-top: 20px;
  text-align: center;
}

.pagination button {
  background-color: #42b983;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  margin: 0 5px;
}

.pagination button:hover {
  background-color: #38a169;
}

.pagination button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}
</style>
